<template>
	<view class="upload-list">
		<view class="upload-img margin30" v-for="(item,index) in imgSrcList">
			<view class="delete-icon" @click="deleteCurrentImg(item,index)">x</view>
			<image :src="item" mode="aspectFill" @click="previewImage(index)"></image>
		</view>
		<view class="upload-icon" @click="chooseImg" v-if="imgSrcList.length < count">
			<span class="upload-add">+</span>
			{{uploadText}}
		</view>
	</view>
</template>

<script>
	/*
	  图片上传组件
	  主要功能：九宫格图片上传，图片预览、删除图片
	  图片格式、图片大小校验
	  拖曳交换顺序
	*/
	export default{
		props: {
			//上传文字
			uploadText:{
				type:String,
				default:'上传图片'
			},
			//上传图片张数
			count: {
				type: [Number, String],
				default: 8
			},
			//单张图片限制大小
			limit: {
				type: Number,
				default: 2
			},
		},
		data() {
			return {
				imgSrcList: [],
				//将success返回参数传递给父组件
				imgListInfo:[]	
			}
		},
		methods: {
			//选择图片
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: that.count, //默认9，count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择，在H5端对应input的capture属性，设置为['album']无效，依然可以使用相机
					success: function(res) {
						let tempFilePaths = res.tempFilePaths; //图片的本地文件路径列表
						let tempFiles = res.tempFiles; //图片的本地文件列表，每一项是一个 File 对象
						
						
						//由于官方说count参数设置无效，需手动判断上传数量
						if ((tempFilePaths.length + that.imgSrcList.length) > that.count) {
							uni.showToast({
								icon: 'none',
								title: '最多上传9张图片',
								duration: 3000,
							})
							return false;
						} else {
							let isValid = true;
							for (let i in tempFiles) {
								
								//#ifdef H5
								// 只需要在H5判断图片类型,小程序会自动打开相机
								if (tempFiles[i].type !== 'image/png' && tempFiles[i].type !== 'image/jpg' && tempFiles[i].type !==
									'image/jpeg') {
									uni.showToast({
										icon: 'none',
										title: '图片类型仅限于jpg/jpeg/png',
										duration: 3000,
									})
									isValid = false;
									break;
									return false
								} 
								//#endif
								
								if (tempFiles[i].size / 1024 / 1024 > that.limit) {
									uni.showToast({
										icon: 'none',
										title: '图片不得大于'+that.limit+'M',
										duration: 3000
									})
									isValid = false;
									break;
								}
							}
							//图片不合法就不往下执行
							if (!isValid) {
								return false;
							}
						}
						
						that.imgListInfo.push(res);
						//将success返回参数传递给父组件
						that.$emit('getImgListInfo',that.imgListInfo);
						that.imgSrcList = that.imgSrcList.concat(tempFilePaths);
					}
				});
			},
			//删除当前图片
			deleteCurrentImg(item, index) {
				this.imgSrcList.splice(index, 1)
			},
			//图片预览
			previewImage(index) {
				let that = this;
				uni.previewImage({
					urls: that.imgSrcList, //预览图片列表
					current: index //当前预览索引
				})
			},
			
			
		}
	}
</script>

<style lang="scss">
	.upload-list {
		display: flex;
		flex-flow: row wrap;
	
		.upload-icon {
			width: 210rpx;
			height: 210rpx;
			border: dashed 1rpx #dddddd;
			text-align: center;
			// line-height: 200rpx;
			color: #999999;
			font-size: 30rpx;
	
			.upload-add {
				display: block;
				font-size: 60rpx;
				margin-top: 30rpx;
			}
		}
	
		.margin30 {
			margin-right: 30rpx;
	
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	
		.upload-img {
			position: relative;
	
			image {
				width: 210rpx;
				height: 210rpx;
				margin-bottom: 20rpx;
			}
		}
	
		.delete-icon {
			position: absolute;
			display: inline-block;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #333333;
			opacity: 0.3;
			border-radius: 50%;
			color: #ffffff;
			text-align: center;
			z-index: 99;
			font-size: 26rpx;
		}
	}
</style>
